import React, {useState} from 'react';
import {Menu, Dropdown, Button, Row, Col} from 'antd';

export default function Topic1() {
  const [menuList, setMenuList] = useState([{url: 'http://www.alipay.com/'}]);
  const [total, setTotal] = useState('');
  
  function addMenuItem() {
    setMenuList(val => {
      const newVal = val.concat([{url: 'http://www.alipay.com/'}])
      showMenuListLength(newVal)
      return newVal
    })
    
  }
  
  function showMenuListLength(array) {
    setTotal(val => (val || 1) + array.length)
  }
  
  const menu = (
    <Menu>
      {menuList.map((elm, index) => (
        <Menu.Item key={index}>
          <a target="_blank" rel="noopener noreferrer" href={elm.url}>
            {index + 1}st menu item
          </a>
        </Menu.Item>
      ))}
    </Menu>
  );
  
  return (
    <Row align="middle">
      <Col>
        <Dropdown overlay={menu} placement="bottomLeft">
          <Button onClick={() => addMenuItem()}>bottomLeft</Button>
        </Dropdown>
      </Col>
      <Col className="number">
        {total}
      </Col>
    </Row>
  )
}